<template>
	<view class="uni-breadcrumb-x">
		<uni-breadcrumb separator="/">
			<uni-breadcrumb-item v-for="(route, index) in routes" :key="index" :to="route.to">{{route.name}}</uni-breadcrumb-item>
		</uni-breadcrumb>
	</view>
</template>

<script>
	import {
		mapState,
    mapMutations
	} from 'vuex'

	export default {
		name: "uni-stat-breadcrumb",
		data() {
			return {

			};
		},
		computed: {
			...mapState('app', ['routes'])
		},
    created() {
    },
    methods:{
      ...mapMutations('app', ['SET_LAST_ROUTE_NAME'])
    },
    watch: {
      // #ifdef H5
      $route: {
        immediate: true,
        handler(newRoute, oldRoute) {
          if(newRoute.query.title){
            this.SET_LAST_ROUTE_NAME(newRoute.query.title)
          }
        }
      },
      // #endif
    }
	}
</script>

<style>
	.uni-breadcrumb-x {
		flex: 1;
		display: flex;
		padding: 0 5px;
		min-height: 55px;
		line-height: 55px;
		align-items: center;
	}
</style>
